<!--
 * @Description: FRM题库 -- frm_practice
 * @Author: your name
 * @Date: 2024-01-02
 * @LastEditTime: 2024-01-02
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="frmPractice heart_w">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          :to="{ path: '/exam_practice/FRM/frmQuestionbank', query: { cid } }"
        >
          FRM
        </el-breadcrumb-item>
        <el-breadcrumb-item> {{ cate_name }} </el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 做题模式 topic_model == 1 -->
      <div
        style="display: flex; justify-content: space-between"
        v-if="topic_model == 1 && type_t"
      >
        <div class="testBox">
          <div v-for="item in topicarr" :key="item.tid">
            <div class="casebox" v-if="item.position == nowposition">
              <div v-html="item.case_content"></div>
            </div>

            <div class="top" v-if="item.position == nowposition">
              <h5>{{ item.position }}.[单项选择题]</h5>
              <div class="operations">
                <div @click="wd_show = true">
                  <img src="@/assets/images/ask1.png" alt="" />
                  <span>提问</span>
                </div>
                <div @click="correct_err_show = true">
                  <img src="@/assets/images/errorCor1.png" alt="" />
                  <span>纠错</span>
                </div>
                <div @click="shoucang(item)">
                  <img
                    v-if="!item.is_collection"
                    src="@/assets/images/collected.png"
                    alt=""
                  />
                  <img
                    v-if="item.is_collection"
                    src="@/assets/images/noCollect.png"
                    alt=""
                  />
                  <span v-if="item.is_collection">取消收藏</span>
                  <span v-if="!item.is_collection">收藏</span>
                </div>
              </div>
            </div>

            <!-- 单选/多选 -->
            <div v-if="item.position == nowposition">
              <div class="testTit" v-html="item.title"></div>
              <div class="options">
                <div
                  v-for="(option, index) in item.op"
                  :key="index"
                  :class="{
                    optionBox: true,
                    activeCss: item.user_answer_index == index + 1
                  }"
                  @click="chose_answer(item.position, item, index)"
                >
                  <!-- {{ item.user_answer_index == index + 1 }} --
                  {{ item.user_answer_index }} == {{ index + 1 }} -->
                  <div class="option">
                    {{ oplist[index] }}
                  </div>
                  <div class="optionText">{{ option }}</div>
                </div>
              </div>
            </div>

            <!-- text题 -->
            <div v-if="false">
              <div>
                <div>v-html="item.title"</div>
                <input
                  v-model="user_answer_index"
                  type="text"
                  class="textinput"
                  @blur="
                    chose_answer(item.position, item, item.user_answer_index)
                  "
                />
                <div>文本题系统不做判断，请自评掌握情况:</div>
                <div class="tbtn">
                  <div
                    :class="{ active: 1 == opena }"
                    @click="isknow(item.position, item, 1)"
                  >
                    已掌握
                  </div>
                  <div
                    :class="{ active: 2 == opena }"
                    @click="isknow(item.position, item, 2)"
                  >
                    未掌握
                  </div>
                </div>
              </div>
            </div>

            <!-- footer按钮 -->
            <div class="openAnalysis" v-if="item.position == nowposition">
              <div class="btn" @click="toscan(item.user_answer_index)">
                查看解析
              </div>
              <div
                class="btn"
                @click="toprev(item.position)"
                style="margin-left: 10px"
              >
                上一题
              </div>
              <div class="btn" @click="tonext(item.position)">下一题</div>
            </div>

            <div
              class="analysisBox"
              v-if="item.position == nowposition && user_analysis"
            >
              <!-- 试题解析 -->
              <div class="yourAns">
                正确答案：<span>{{ oplist[Number(item.answer - 1)] }}</span>
                &nbsp;&nbsp;您的答案：
                <span
                  v-if="item.answer == item.user_answer_index"
                  style="color: #00af63"
                >
                  {{ oplist[Number(item.user_answer_index - 1)] }}
                </span>
                <span
                  v-if="item.answer != item.user_answer_index"
                  style="color: #ff8a8d"
                >
                  {{ oplist[Number(item.user_answer_index - 1)] }}
                </span>
              </div>
              <!-- 视频解析 -->
              <div>
                <span class="tit">视频解析：</span>
                <div
                  class="video"
                  style="width: 530px; height: 100%; background: #e0e0e0"
                >
                  <video-player
                    class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="playerOptions"
                    @play="onPlayerPlay($event)"
                    @pause="onPlayerPause($event)"
                    @playing="onPlayerPlaying($event)"
                    @ended="onPlayerEnded($event)"
                  >
                  </video-player>
                </div>
              </div>
              <!-- 答案解析 -->
              <div v-if="!false">
                <span class="tit">答案解析：</span>
                <p style="width: 690px" v-html="item.analysis"></p>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="top">
            <div class="timePause">
              <p class="time">
                用时：<span> {{ timing }} </span>
              </p>
              <button @click="stop">暂停</button>
            </div>
            <div class="progressBox" v-if="topicarr.length > 0">
              <span>进度:</span>
              <el-progress
                :percentage="(donum / topicarr.length) * 100"
                style="width: 125px"
                :stroke-width="10"
                color="0193ff"
                :show-text="false"
              >
              </el-progress>
              <span>{{ donum }}/{{ topicarr.length }}题</span>
            </div>
          </div>

          <div class="center">
            <button @click="Saveprogress()">保存进度下次继续</button>
            <button @click="submitShow = true">交卷</button>
          </div>

          <div class="tiList">
            <div class="tit">答题卡</div>
            <div class="listBox">
              <div class="testSitu">
                <p>已答</p>
                <p>未答</p>
              </div>
              <div class="list" style="padding-top: 10px">
                <span
                  :class="{ nodo: item.is_true == -1 }"
                  v-for="(item, index) in topicarr"
                  :key="index"
                  @click="cardto(item.position)"
                >
                  {{ index + 1 }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 背题模式 topic_model == 2 -->
      <div
        style="display: flex; justify-content: space-between"
        v-if="topic_model == 2 && type_t == 1"
      >
        <div class="testBox">
          <div v-for="item_b in topicarr" :key="item_b.tid">
            <div class="casebox" v-if="item_b.position == nowposition">
              <div v-html="item_b.case_content"></div>
            </div>

            <div class="top" v-if="item_b.position == nowposition">
              <h5>{{ item_b.position }}.[单项选择题]</h5>
              <div class="operations">
                <div @click="wd_show = true">
                  <img src="@/assets/images/ask1.png" alt="" />
                  <span>提问</span>
                </div>
                <div @click="correct_err_show = true">
                  <img src="@/assets/images/errorCor1.png" alt="" />
                  <span>纠错</span>
                </div>
                <div @click="shoucang(item_b)">
                  <img
                    v-if="!item_b.is_collection"
                    src="@/assets/images/collected.png"
                    alt=""
                  />
                  <img
                    v-if="item_b.is_collection"
                    src="@/assets/images/noCollect.png"
                    alt=""
                  />
                  <span v-if="item_b.is_collection">取消收藏</span>
                  <span v-if="!item_b.is_collection">收藏</span>
                </div>
              </div>
            </div>

            <!-- 单选 -->
            <div v-if="item_b.position == nowposition">
              <div class="testTit" v-html="item_b.title"></div>
              <div class="options">
                <div
                  :class="{
                    optionBox: true,
                    topic_t: item_b.answer == index + 1
                  }"
                  v-for="(option, index) in item_b.op"
                  :key="index"
                >
                  <div class="option">
                    {{ oplist[index] }}
                  </div>
                  <div class="optionText">{{ option }}</div>
                </div>
              </div>
            </div>

            <!-- text题 -->
            <div v-if="false">
              <div>
                <div>v-html="item.title"</div>
                <input
                  v-model="user_answer_index"
                  type="text"
                  class="textinput"
                  @blur="
                    chose_answer(item.position, item, item.user_answer_index)
                  "
                />
                <div>文本题系统不做判断，请自评掌握情况:</div>
                <div class="tbtn">
                  <div
                    :class="{ active: 1 == opena }"
                    @click="isknow(item.position, item, 1)"
                  >
                    已掌握
                  </div>
                  <div
                    :class="{ active: 2 == opena }"
                    @click="isknow(item.position, item, 2)"
                  >
                    未掌握
                  </div>
                </div>
              </div>
            </div>

            <!-- footer按钮 -->
            <div class="openAnalysis" v-if="item_b.position == nowposition">
              <!-- <el-button type="primary" disabled>查看解析</el-button> -->
              <div
                class="btn"
                @click="toprev(item_b.position)"
                style="margin-left: 10px; border-radius: 5px"
              >
                上一题
              </div>
              <div
                class="btn"
                @click="tonext(item_b.position)"
                style="border-radius: 5px"
              >
                下一题
              </div>
            </div>

            <div class="analysisBox" v-if="item_b.position == nowposition">
              <!-- 答案解析 -->
              <div v-if="!false">
                <span class="tit">答案解析：</span>
                <p style="width: 690px" v-html="item_b.analysis"></p>
              </div>
              <!-- 视频解析 -->
              <div>
                <span class="tit">视频解析：</span>
                <div
                  class="video"
                  style="width: 530px; height: 100%; background: #e0e0e0"
                >
                  <video-player
                    class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="playerOptions"
                    @play="onPlayerPlay($event)"
                    @pause="onPlayerPause($event)"
                    @playing="onPlayerPlaying($event)"
                    @ended="onPlayerEnded($event)"
                  >
                  </video-player>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="tiList">
            <div class="tit">答题卡</div>
            <div class="listBox">
              <div class="testSitu">
                <!-- <p>已答</p>
                <p>未答</p> -->
                <span>提示：背题模式下只允许查看题目解析</span>
              </div>
              <div class="list" style="padding-top: 10px">
                <span
                  v-for="(item, index) in topicarr"
                  :key="index"
                  :class="{ nodo: item.is_true == -1 }"
                  @click="cardto(item.position)"
                >
                  {{ index + 1 }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 答疑 -->
    <transition name="leftToright">
      <div class="common_dialog ans_que" v-if="wd_show">
        <div class="inner_con">
          <div class="title">
            问答
            <div class="close" @click="close_wd"></div>
          </div>
          <div class="row">
            <button
              class="my_ans"
              style="background-color: #eb0808"
              @click="get_ask(1, 0)"
            >
              我的提问
            </button>
            <button
              class="other_ans"
              style="background-color: #fdaf42"
              @click="get_ask(0, 0)"
            >
              全部问答
            </button>
          </div>
          <div class="que_tit">
            <input
              type="text"
              v-model="wd_tit"
              placeholder="请输入需要提问的标题"
            />
          </div>
          <div class="que_info">
            <textarea placeholder="请输入您要提问的内容" v-model="wd_info">
            </textarea>
          </div>
          <div class="upd_box">
            <el-upload
              action="#"
              list-type="picture-card"
              :on-preview="imgPreview"
              :on-remove="handleRemove"
              :http-request="upload_img"
              :limit="3"
              :on-exceed="handleExceed"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
          <div class="btm_btns">
            <button @click="close_wd">取消</button>
            <button @click="submit_wd">保存</button>
          </div>
        </div>
      </div>
    </transition>
    <!-- 缩略图展示 -->
    <el-dialog :visible.sync="wd_preview_show">
      <img width="100%" :src="wd_preview_img" alt="缩略图" />
    </el-dialog>
    <!-- 问答列表 -->
    <transition name="leftToright">
      <div class="common_dialog ask_box" v-if="ask_show">
        <div class="inner_box">
          <div class="top">
            <img
              src="https://www.rongyuejiaoyu.com/static/index/images/head5.jpg"
              alt="user_ava"
            />
            <!-- <h5 :title="ask_tit">{{ ask_tit }}</h5> -->
            <h5>ask_tit</h5>
            <button @click="ask_show = false">关闭</button>
          </div>
          <div class="tit_div">
            <p class="count">0条提问</p>
            <div class="type">
              <p :class="{ act_type: ask_type == 1 }" @click="get_ask(1, 1)">
                我的
              </p>
              <p :class="{ act_type: ask_type == 0 }" @click="get_ask(0, 1)">
                全部
              </p>
            </div>
          </div>
          <div class="list_item">
            <div class="item" v-for="(e, i) in ask_list" :key="i">
              <div class="top_con">
                <div class="avatar_box"><img :src="e.avatar" alt="" /></div>
                <div class="ana_box">
                  <p class="name">{{ e.username }}</p>
                  <p class="time">{{ e.new_add_time }}</p>
                  <p class="con">{{ e.question_title }}</p>
                </div>
              </div>
              <div class="img_box">
                <img
                  @click="show_big(item)"
                  :src="item"
                  alt=""
                  v-for="(item, index) in e.images"
                  :key="index"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 纠错 -->
    <transition name="leftToright">
      <div class="common_dialog jc_dialog" v-if="correct_err_show">
        <div class="inner_con">
          <div class="title">
            纠错
            <div class="close" @click="close_err"></div>
          </div>
          <div class="body">
            <p class="t_title">
              CFALevel II“甄”题库Economics(2024N) LM1 Currency Exchange Rates:
              Understanding Equilibrium Value
            </p>
            <div class="choose_box">
              <el-radio-group v-model="error_form.err_choose">
                <el-radio size="medium" label="0">答案错误</el-radio>
                <el-radio size="medium" label="1">功能问题</el-radio>
                <el-radio size="medium" label="2">错误解析</el-radio>
                <el-radio size="medium" label="3">判分错误</el-radio>
                <el-radio size="medium" label="4">排版错误</el-radio>
                <el-radio size="medium" label="5">其他</el-radio>
              </el-radio-group>
            </div>
            <textarea
              placeholder="感谢您的意见和体验感受，我们一定会快速解决您的..."
              class="jc_input"
              v-model="error_form.correct_info"
            >
            </textarea>
            <div class="concat">
              联系方式：
              <input
                placeholder="您的手机号"
                type="text"
                v-model="error_form.your_phone"
              />
            </div>
          </div>
          <div class="btm_btn">
            <button class="cancel" @click="close_err">取消</button>
            <button class="sure" @click="submit_err()">确定</button>
          </div>
        </div>
      </div>
    </transition>

    <!-- 交卷 -->
    <transition name="leftToright">
      <div class="mask_unfinished" v-show="submitShow">
        <div class="kuang" ref="isDomsk">
          <img
            src="https://www.rongyuejiaoyu.com/newzhike/img/unfinished.png"
            alt=""
          />
          <p>确认提交试卷？</p>
          <div class="error_btn">
            <a href="javascript:void(0);" class="a_submit" @click="submitTest">
              提交
            </a>
            <a
              href="javascript:void(0);"
              class="a_cancel"
              @click="submitShow = false"
            >
              取消
            </a>
          </div>
        </div>
      </div>
    </transition>

    <!-- 暂停做题 -->
    <transition name="leftToright">
      <div class="mask-pause" v-show="pauseShow">
        <div class="kuang">
          <img
            src="https://www.rongyuejiaoyu.com/newzhike/img/icon-save.png"
            alt=""
          />
          <p>休息一下，马上回来！</p>
          <div class="stopBtn" @click="pauseHide">继续做题</div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import {
  getTopic,
  startStudy,
  endStudy,
  collection,
  ProgressSave,
  submitTest
} from '@/api/FRM.js'

export default {
  name: 'frmPractice',
  data() {
    return {
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为, 立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4', // 类型
            src: '' // url地址
          }
        ],
        // poster: '@/assets/images/material/video-bg.png', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      clickId: 0, // 当前选项按钮
      topic_model: '', // 1做题模式 0背题模式
      type_t: '',
      wd_tit: '', // 问答标题
      wd_info: '', // 问答内容
      note_list: [], // 笔记列表
      filelist: [], // 文件上传列表
      ask_list: [], // 问答列表
      wd_preview_show: false, // 控制打开变量
      wd_preview_img: '', // 缩略图文件
      donum: 0, // 已做题数
      submitShow: false, // 交卷
      nowposition: 1, //当前题的题号
      user_answer_index: -1,
      opena: -1, // 1 掌握 2未掌握 -1 初始值
      seconds: 0, // 计时时间
      user_analysis: false,
      pauseShow: false,
      timing: '00:00:00',
      Init: null,
      testTime: 0,
      ask_type: 1,
      ask_show: false,
      wd_show: false, // 提问
      correct_err_show: false, // 纠错
      error_form: {
        err_choose: '0', // 纠错/复选框
        correct_info: '', // 纠错/文本域
        your_phone: '' // 纠错/ 手机号
      },
      cid: '',
      vsrc: '',
      cate_name: '',
      tid: 0, //当前题目的tid
      report_id: '', // 提交接口
      xq_report: 0, //学习报告id
      cardtype: 1, // 答题卡 题型参数
      testarr: [], // 请求返回的单选题暂存数组list
      topicarr: [], // 请求返回的题目重组数组
      oplist: ['A', 'B', 'C', 'D', 'E'] //选项序号 循环数组
    }
  },
  created() {
    this.start()
    this.topic_model = this.$route.query.model
    this.type_t = this.$route.query.type
    this.cid = localStorage.getItem('frmcid')
    console.log(this.$route.query, '222222222', this.$route.query.model)
    this.getTopicData()
    this.xq_begin() // 学情报告 开始
  },
  /**
   *
   */
  mounted() {
    if (this.$route.name == 'frmPractice') {
      this.addOne()
    }
  },
  methods: {
    addOne() {
      this.$store.commit('hideGlobalComponent', false)
    },
    // 学情报告 开始
    async xq_begin() {
      this.xq_start = Number((new Date().getTime() / 1000).toFixed())
      let dataobj = {
        // cate: JSON.parse(this.mycate).item_id, //项目分类
        // TODO: 学情报告  开始
        cate: 2, //项目分类
        mold: 2, //	1视频2题库
        type: 1, // 1录播2私播3智课4直播
        stype: 2, //1机考2练题3模拟4组卷
        chain_id: this.$route.query.cid, // 章节id  试卷类 传级别id
        // rel_id: this.aiId, // 关联id   试卷id
        study_start: this.xq_start, //开始时间（以秒为单位的时间戳）
        dtype: 1,
        ztype: 1
      }
      const { data: data } = await startStudy(dataobj)
      if (data.code == 1) {
        // console.log(data, '学情报告开始')
        this.xq_report = data.data.report_id
      }
    },
    //学情报告 结束
    async xq_end() {
      let xq_end = Number((new Date().getTime() / 1000).toFixed())
      let dura_time = xq_end - this.xq_start //停留时间
      dura_time = this.xq_times > dura_time ? this.xq_times : dura_time
      // TODO: 学情报告 结束
      let dataobj = {
        mold: 2, //2 题库
        report_id: this.xq_report, //报告id
        type: 1, //  1 普通题库  2 智课题库
        stype: 2, // 1机考2练题3模拟4组卷
        times: dura_time, //学习时长（单位秒）
        tiku_length: dura_time, //题库时长（单位秒）
        // simulate_id: this.aiId, //试卷id
        total_tiku: 0, // 做题数目
        right_tiku: 0, // 正确数目 this.ti_log.filter((ele) => ele.is_true == 1).length
        tids: JSON.stringify([]), //题目集合 JSON.stringify(this.tid_arr)
        ti_log: JSON.stringify([]), //做题详情 JSON.stringify(this.ti_log)
        study_end: xq_end, // 结束时间（以秒为单位的时间戳）
        dtype: 1, // 1 web 2 安卓 3 ios
        ztype: 1 // 1 做题 2 背题 3 解析
      }
      const { data: data } = await endStudy(dataobj)
      // console.log(data, '学情报告结束')
    },

    async getTopicData() {
      let _that = this
      let position_num = 0
      let data_topic = {
        cid: this.$route.query.cid,
        type: this.$route.query.type,
        token: this.$store.state.token
      }
      const { data: data } = await getTopic(data_topic)
      if (data.code == 1) {
        let title = data.data.cate.slice(0, 2)
        _that.cate_name = title.join(' > ')
        _that.cardtype = 0
        // console.log(_that.cate_name, 'topic', data.data)
        if (data.data.list.length && data.data.list.length > 0) {
          _that.testarr = data.data.list.map((ele, index) => {
            position_num++
            if (ele.position) {
              ele.position = ele.position
            } else {
              ele.position = position_num
            }
            if (this.$route.query.type != 2) {
              ele.test_index = index // 在test 数组中的位置
              ele.user_answer_index = ele.user_answer_index
                ? ele.user_answer_index
                : -1
            } else {
              ele.test_index = index // 在test 数组中的位置
            }
            _that.topicarr.push(ele)
            this.vsrc = this.topicarr[0].vod_analysis
            this.playerOptions['sources'][0]['src'] = this.vsrc
            return ele
          })
          console.log(_that.testarr, 'data.list', _that.topicarr)
        }
      } else {
        this.$message.error(data.msg)
      }
    },
    get_ask(id, is_open) {
      if (!is_open) {
        this.wd_show = false
        this.ask_show = true
      }
      this.ask_type = id
    },
    toscan(it_e) {
      if (it_e == -1) {
        this.$message.warning('请选择答案')
      } else {
        this.user_analysis = !this.user_analysis
      }
    },
    submit_err() {},
    close_err() {
      // 纠错
      this.correct_err_show = false
      this.error_form.correct_info = ''
      this.error_form.your_phone = ''
      this.error_form.err_choose = '0'
    },
    // 收藏
    async shoucang(item) {
      const datas = {
        cid: item.cid,
        tid: item.tid,
        isCollect: item.is_collection,
        from: 2
      }
      item.is_collection = !item.is_collection
      const { data: data } = await collection(datas)
      if (!data.data.is_collection) {
        this.$message.success('取消收藏成功')
      } else {
        this.$message.success('收藏成功')
      }
    },
    chose_answer(position, item, answer) {
      let _this = this
      console.log(
        _this.donum,
        answer,
        'chose_answer',
        position,
        _this.nowposition
      )
      _this.nowposition = position

      // 单选题选择答案
      if (item.test_index >= 0) {
        _this.testarr[item.test_index].user_answer_index = answer + 1
        _this.topicarr[position - 1].user_answer_index = answer + 1

        if (answer >= 0 && item.answer == answer + 1) {
          // 正确更改is_true值状态  正确 1 错误 0 未选 -1
          _this.testarr[item.test_index].is_true = 1
        } else if (answer >= 0 && item.answer != answer + 1) {
          _this.testarr[item.test_index].is_true = 0
        }

        console.log(_this.testarr, '333333333333333333')
      }
      this.howmuch()
    },

    // 上一题
    toprev(position) {
      this.nowposition = Number(position) - 1
      if (this.nowposition < 1) {
        this.nowposition = 1
        this.$message.warning('没有上一题了')
        return false
      }
      this.vsrc = this.topicarr[this.nowposition - 1].vod_analysis
      this.playerOptions['sources'][0]['src'] = this.vsrc
      this.user_analysis = false // 更改解析状态
      this.howmuch()
    },
    // 下一题
    tonext(position) {
      this.nowposition = Number(position) + 1
      if (this.nowposition > this.topicarr.length) {
        this.nowposition = this.topicarr.length
        this.$message.warning('没有下一题了')
        return false
      }
      this.vsrc = this.topicarr[this.nowposition - 1].vod_analysis
      this.playerOptions['sources'][0]['src'] = this.vsrc
      this.user_analysis = false // 更改解析状态
      this.howmuch()
    },
    // 暂停计时
    stop() {
      clearInterval(this.Init)
      this.pauseShow = true
      console.log(this.seconds)
    },
    pauseHide() {
      this.pauseShow = false
      this.start()
    },
    async submitTest() {
      // 单选题
      let arr_t = []
      let trueNum = 0 //做对多少题
      let testNum = 0 // 做了多少题
      let acmonth = this.testarr
      let timeSeconds = this.seconds
      acmonth.forEach((item) => {
        if (item.is_true == '-1' || item.is_true == -1) {
          // 未做题目让op设置为 ""
          item.op = ''
        } else {
          // user_answer_index 默认为 -1 (即上方条件不符合设置为 user_answer_index值)
          item.op = item.user_answer_index
        }
        arr_t.push({
          is_true: item.is_true,
          op: item.op,
          tid: item.tid,
          user_answer_index: item.user_answer_index
        })
        if (item.is_true == 1) {
          trueNum = trueNum + 1
        }
      })

      const sut_b = {
        cid: this.$route.query.cid,
        test_topic: JSON.stringify(arr_t),
        use_time: timeSeconds,
        true_num: trueNum,
        test_num: this.donum,
        t_num: this.topicarr.length
      }
      const { data: data } = await submitTest(sut_b)
      if (data.code == 1) {
        this.report_id = data.data.report_id
        console.log(data.data, 'submitTest提交')
        this.$message.success('提交成功!')
        this.submitShow = false
        this.$router.push({
          path: '/exam_practice/FRM/frmReport',
          query: {
            id: data.data.report_id,
            from: 2
          }
        })
      }
    },
    // 保存进度
    async Saveprogress() {
      let _that = this
      let arrList = []
      const acmonth = this.testarr // list 数据
      const timeSeconds = this.seconds // 计时时间

      if (acmonth.length > 0) {
        acmonth.forEach((item) => {
          /* arrList.push({
            caseid: item.caseid,
            caseinfo: item.caseinfo,
            chooseAnswerNums: item.chooseAnswerNums,
            cid: item.cid,
            id: item.id,
            is_case: item.is_case,
            is_collection: item.is_collection,
            is_multi: item.is_multi,
            level: item.level,
            ms_analysis: item.ms_analysis,
            one: item.one,
            qst_type: item.qst_type,
            sug_level: item.sug_level,
            t_type: item.t_type,
            op: item.op,
            tid: item.tid,
            user_answer_index: item.user_answer_index,
            is_true: item.is_true,
            options: item.options,
            title: _that.stringToEntity(item.title), // 字符串转实体
            isChoose: item.isChoose,
            answerAnalize: item.answerAnalize,
            lookanalysisString: item.lookanalysisString,
            islookAnaly: item.islookAnaly,
            analysis: _that.stringToEntity(item.analysis),
            answer: item.answer,
            vod_analysis: item.vod_analysis,
            thinking: item.thinking,
            position: item.position
          })
          */

          arrList.push({
            is_true: item.is_true,
            cid: item.cid,
            op: item.op,
            tid: item.tid,
            options: item.options,
            title: _that.stringToEntity(item.title), // 字符串转实体
            is_collection: item.is_collection,
            isChoose: item.isChoose,
            answerAnalize: item.answerAnalize,
            lookanalysisString: item.lookanalysisString,
            islookAnaly: item.islookAnaly,
            one: item.one,
            analysis: _that.stringToEntity(item.analysis),
            answer: item.answer,
            user_answer_index: item.user_answer_index,
            vod_analysis: item.vod_analysis
          })

          // console.log('2222222', arrList)
        })
      }

      const testData = {
        cid: this.$route.query.cid,
        test_topic: JSON.stringify(arrList),
        use_time: timeSeconds,
        model: 1,
        position: _that.nowposition,
        ai_id: 0
      }
      const { data: data } = await ProgressSave(testData)
      this.$router.push({
        path: '/exam_practice/FRM/frmQuestionbank',
        query: {
          cid: this.$route.query.cid_t
        }
      })

      console.log(testData)
      if (data.code == 1) {
        this.$message.success(data.msg)
      }
      console.log('进度保存', data)
    },
    howmuch() {
      let _this = this
      _this.donum = 0
      _this.topicarr.map((ele) => {
        if (ele.user_answer_index && ele.user_answer_index != -1) {
          _this.donum++
          return false
        } else if (ele.is_true != -1) {
          _this.donum++
        }
      })

      console.log(_this.donum, '做题数')
    },
    // 答疑保存
    submit_wd() {},
    cardto(position) {
      //答题卡跳转
      this.nowposition = position
      this.vsrc = this.topicarr[this.nowposition - 1].vod_analysis
      this.playerOptions['sources'][0]['src'] = this.vsrc
      this.user_analysis = false // 更改解析状态
      this.howmuch()
    },
    close_wd() {
      this.wd_tit = ''
      this.wd_info = ''
      this.filelist = []
      this.wd_show = false
    },
    imgPreview(file) {
      console.log(file, '888888888')
      this.wd_preview_img = file.url
      this.wd_preview_show = true
    },
    handleRemove(file) {
      this.filelist.pop()
    },
    upload_img(res) {
      console.log(res, '22222222')
      this.filelist.push(res.file)
    },
    handleExceed() {
      this.$message.warning('最多上传三张图片！')
    },
    // 字符串转实体
    stringToEntity(str) {
      var div = document.createElement('div')
      div.innerText = str
      div.textContent = str
      var res = div.innerHTML
      console.log(str, '->---字符串转实体---', res)
      return res
    },
    start() {
      this.Init = setInterval(this.timers, 1000)
    },
    timers(num) {
      if (num) {
        this.seconds = this.testTime
      }
      this.seconds++
      var second = this.seconds % 60
      var minute = parseInt(this.seconds / 60) % 60
      var hour = parseInt(this.seconds / 3600)
      this.timing = `${hour < 10 ? '0' + hour : hour}:
      ${minute < 10 ? '0' + minute : minute}:
      ${second < 10 ? '0' + second : second}`
    },
    // 监听播放
    onPlayerPlay(player) {
      // this.$signalr.SendMsg(6301, this.id, '开始播放视频')
      console.log('开始播放视频')
    },
    // 暂停视频
    onPlayerPause(player) {
      // this.$signalr.SendMsg(6302, this.id, '暂停视频')
      console.log('暂停视频')
    },
    // 视频继续播放
    onPlayerPlaying(player) {
      // this.$signalr.SendMsg(6303, this.id, '视频继续播放')
      console.log('视频继续播放')
    },
    // 视频播放结束
    onPlayerEnded(player) {
      // this.$signalr.SendMsg(6304, this.id, '视频播放结束')
      console.log('视频播放结束')
    }
  },
  beforeDestroy() {
    // 组件实例被销毁时执行结束
    this.xq_end()
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';
@import '@/assets/styles/frm_practice.scss';
.el-breadcrumb {
  font-size: 16px;
  padding: 30px 12px;
  background-color: #fff;
  border-radius: 5px;
  margin: 10px 0;
}

.tbtn {
  display: flex;
  div {
    margin-right: 12px;
    margin-top: 8px;
    cursor: pointer;
  }
}

.textinput {
  width: 100%;
  height: 70px;
  border: 1px solid #999;
  border-radius: 5px;
  padding: 5px;
  color: #333;
  font-size: 16px;
  line-height: 20px;
}
</style>
